<div style="POSITION: relative" id="content">
  <h3>使用easyUI创建一个CRUD DataGrid</h3>
  <div id="article_content" class="article_content">
    <p>在前面的示例中我们创建crud应用使用对话框(dialog)组件创建和编辑用户信息,这个教程将告诉你如何创建一个crud&nbsp;<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid,我们将使用可编辑的datagrid插件做这些crud操作动作.</span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344392241_1415.png" alt=""><br>
      </span></p>
<p></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤1:在HTML标记中定义一个DataGrid</h4>
    <pre name="code" class="html">&lt;table id=&quot;dg&quot; title=&quot;My Users&quot; style=&quot;width:550px;height:250px&quot;  
        toolbar=&quot;#toolbar&quot;  
        rownumbers=&quot;true&quot; fitColumns=&quot;true&quot; singleSelect=&quot;true&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;firstname&quot; width=&quot;50&quot; editor=&quot;{type:'validatebox',options:{required:true}}&quot;&gt;First Name&lt;/th&gt;  
            &lt;th field=&quot;lastname&quot; width=&quot;50&quot; editor=&quot;{type:'validatebox',options:{required:true}}&quot;&gt;Last Name&lt;/th&gt;  
            &lt;th field=&quot;phone&quot; width=&quot;50&quot; editor=&quot;text&quot;&gt;Phone&lt;/th&gt;  
            &lt;th field=&quot;email&quot; width=&quot;50&quot; editor=&quot;{type:'validatebox',options:{validType:'email'}}&quot;&gt;Email&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  
&lt;div id=&quot;toolbar&quot;&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-add&quot; plain=&quot;true&quot; onclick=&quot;javascript:$('#dg').edatagrid('addRow')&quot;&gt;New&lt;/a&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-remove&quot; plain=&quot;true&quot; onclick=&quot;javascript:$('#dg').edatagrid('destroyRow')&quot;&gt;Destroy&lt;/a&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-save&quot; plain=&quot;true&quot; onclick=&quot;javascript:$('#dg').edatagrid('saveRow')&quot;&gt;Save&lt;/a&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-undo&quot; plain=&quot;true&quot; onclick=&quot;javascript:$('#dg').edatagrid('cancelRow')&quot;&gt;Cancel&lt;/a&gt;  
&lt;/div&gt;  </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤2: 使DataGrid可编辑</h4>
    <p></p>
    <p>
    <pre name="code" class="javascript">$('#dg').edatagrid({  
    url: 'get_users.php',  
    saveUrl: 'save_user.php',  
    updateUrl: 'update_user.php',  
    destroyUrl: 'destroy_user.php'  
}); </pre>
    我们应该提供<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">'url','saveUrl','updateUrl' 和 'destroyUrl' 属性来编辑<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid</span></span>
    </p>
    <p></p>
    <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span>
      <ul style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
        <li>url:从远程服务器端检索数据.</li>
        <li>saveUrl: 保存一个新的用户数据.</li>
        <li>updateUrl: 更新一个存在的用户的数据.</li>
        <li>destroyUrl:删除一个已存在的用户.</li>
      </ul>
      <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤3:写服务器端处理代码</h4>
      <span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">保存一个新的用户(save_user.php):</span><br>
    </div>
    <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span>
      <pre name="code" class="javascript">$firstname = $_REQUEST['firstname'];  
$lastname = $_REQUEST['lastname'];  
$phone = $_REQUEST['phone'];  
$email = $_REQUEST['email'];  
  
include 'conn.php';  
  
$sql = &quot;insert into users(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')&quot;;  
@mysql_query($sql);  
echo json_encode(array(  
    'id' =&gt; mysql_insert_id(),  
    'firstname' =&gt; $firstname,  
    'lastname' =&gt; $lastname,  
    'phone' =&gt; $phone,  
    'email' =&gt; $email  
));  </pre>
      <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">更新一个已存在用户(update_user.php):</span></p>
      <pre name="code" class="php">  
    $id = intval($_REQUEST['id']);  
    $firstname = $_REQUEST['firstname'];  
    $lastname = $_REQUEST['lastname'];  
    $phone = $_REQUEST['phone'];  
    $email = $_REQUEST['email'];       
    include 'conn.php';      
    $sql = "update users set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id";  
    @mysql_query($sql);  
    echo json_encode(array(  
        'id' => $id,  
        'firstname' => $firstname,  
        'lastname' => $lastname,  
        'phone' => $phone,  
        'email' => $email  
    ));</pre>
      <p> <span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">删除一个已存在用户(destroy_user.php):</span><br>
      </p>
      <pre name="code" class="php"> 
    $id = intval($_REQUEST['id']);  
      
    include 'conn.php';  
      
    $sql = "delete from users where id=$id";  
    @mysql_query($sql);  
    echo json_encode(array('success'=>true));</pre>
      <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载EasyUI 示例代码:</h4>
      &nbsp; &nbsp;<a href="http://www.jeasyui.com/tutorial/app/crud2/downloads/easyui-crud-demo.zip" target="_blank">easyui_crud_demo.zip</a> </div>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>